Summary

This PR removes the hardcoded hover background color in the QuizStatus.vue component and replaces it with a dynamic color using the new $darken utility functions provided by the Kolibri Design System.

...

Context:

The hover background color for buttons in the QuizStatus.vue component was previously hardcoded (#A81700). This approach reduces flexibility and maintainability, especially when applying theme variations. To address this, the newly implemented $darken utilities ($darken1, $darken2, $darken3) will be used to generate a darker shade of the base red color, ensuring consistent theming throughout the UI.

Code Changes:

1. Removed the hardcoded hover color #A81700.
2. Applied the $darken1 utility to derive the hover color dynamically based on the existing red color ($themePalette.red.v_1100).

Example of the changes made:

// Before: Hardcoded color
':hover': { 'background-color': '#A81700' },

// After: Using the $darken utility
':hover': { 'background-color': $darken1($themePalette.red.v_1100) },

…

References

#12553

…

Reviewer guidance

…

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md